<template>
  <div id="app">
    <!--<el-header class="my_header">
      <div class="header_content">
      </div>
    </el-header>-->
    <div class="mobile" v-if="_isMobile()">
      <router-view></router-view>
    </div>
    <div class="computer" v-else>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {

  },
  methods: {
    _isMobile() {
      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
      return flag !== null;
    },
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
  background:url("./assets/首页背景.jpeg");
  background-size: cover;
  justify-content:center;
}
.mobile {
  height: 100%;
}
.computer {
  height: 100%;
  width: 50%;
  margin-left: 25%;
}
html,body{
  /*设置内部填充为0，几个布局元素之间没有间距*/
  padding: 0;
  /*统一设置高度为100%*/
  height: 100%;
}
.my_header {
  color: blue;
  font-size: x-large;
  font-weight: bolder;
  display: table;
  width: 100%;
}
.header_content {
  display: table-cell;
  vertical-align: middle;
}
</style>
